<!--<template>-->
<!--  <div :class="className" :style="{height:height,width:width}" />-->
<!--</template>-->

<!--<script>-->
<!--import echarts from 'echarts'-->
<!--require('echarts/theme/macarons') // echarts theme-->
<!--import resize from './mixins/resize'-->

<!--const animationDuration = 6000-->

<!--export default {-->
<!--  mixins: [resize],-->
<!--  props: {-->
<!--    className: {-->
<!--      type: String,-->
<!--      default: 'chart'-->
<!--    },-->
<!--    width: {-->
<!--      type: String,-->
<!--      default: '100%'-->
<!--    },-->
<!--    height: {-->
<!--      type: String,-->
<!--      default: '300px'-->
<!--    }-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      chart: null-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    this.$nextTick(() => {-->
<!--      this.initChart()-->
<!--    })-->
<!--  },-->
<!--  beforeDestroy() {-->
<!--    if (!this.chart) {-->
<!--      return-->
<!--    }-->
<!--    this.chart.dispose()-->
<!--    this.chart = null-->
<!--  },-->
<!--  methods: {-->
<!--    initChart() {-->
<!--      this.chart = echarts.init(this.$el, 'macarons')-->

<!--      this.chart.setOption({-->
<!--        tooltip: {-->
<!--          trigger: 'axis',-->
<!--          axisPointer: { // 坐标轴指示器，坐标轴触发有效-->
<!--            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'-->
<!--          }-->
<!--        },-->
<!--        grid: {-->
<!--          top: 10,-->
<!--          left: '2%',-->
<!--          right: '2%',-->
<!--          bottom: '3%',-->
<!--          containLabel: true-->
<!--        },-->
<!--        xAxis: [{-->
<!--          type: 'category',-->
<!--          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],-->
<!--          axisTick: {-->
<!--            alignWithLabel: true-->
<!--          }-->
<!--        }],-->
<!--        yAxis: [{-->
<!--          type: 'value',-->
<!--          axisTick: {-->
<!--            show: false-->
<!--          }-->
<!--        }],-->
<!--        series: [{-->
<!--          name: 'pageA',-->
<!--          type: 'bar',-->
<!--          stack: 'vistors',-->
<!--          barWidth: '60%',-->
<!--          data: [79, 52, 200, 334, 390, 330, 220],-->
<!--          animationDuration-->
<!--        }, {-->
<!--          name: 'pageB',-->
<!--          type: 'bar',-->
<!--          stack: 'vistors',-->
<!--          barWidth: '60%',-->
<!--          data: [80, 52, 200, 334, 390, 330, 220],-->
<!--          animationDuration-->
<!--        }, {-->
<!--          name: 'pageC',-->
<!--          type: 'bar',-->
<!--          stack: 'vistors',-->
<!--          barWidth: '60%',-->
<!--          data: [30, 52, 200, 334, 390, 330, 220],-->
<!--          animationDuration-->
<!--        }]-->
<!--      })-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->
